<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span{
				color: red;
			}
		</style>
		<script type="text/javascript">
			function getData1(){
				//1.创建核心对象(固定的)
				let xhr = new XMLHttpRequest()
				//2.创建请求
				xhr.open("GET","person1.xml",true)
				//3.发送请求(固定的)
				xhr.send()
				//4.接收,解析,显示数据
				xhr.onreadystatechange = function(){
					if(xhr.readyState==4 && xhr.status==200){
						let data = xhr.responseXML
						let title = data.getElementsByTagName('title')[0].innerHTML
						let name = data.getElementsByTagName('name')[0].innerHTML
						let tag = data.getElementsByTagName('tag')[0].innerHTML
						let achievement = data.getElementsByTagName('achievement')[0].innerHTML
						let describe = data.getElementsByTagName('describe')[0].innerHTML
						document.querySelector(".s1").innerHTML = title
						document.querySelector(".s2").innerHTML = name
						document.querySelector(".s3").innerHTML = tag
						document.querySelector(".s4").innerHTML = achievement
						document.querySelector(".s5").innerHTML = describe
					}
				}	
			}
			function getData2(){
				//1.创建核心对象(固定的)
				let xhr = new XMLHttpRequest()
				//2.创建请求
				xhr.open("GET","person2.xml",true)
				//3.发送请求(固定的)
				xhr.send()
				//4.接收,解析,显示数据
				xhr.onreadystatechange = function(){
					if(xhr.readyState==4 && xhr.status==200){
						let data = xhr.responseXML
						let stus = data.getElementsByTagName("person")
						console.log(data)
						document.querySelector(".s6").innerHTML = stus[0].getAttribute("title")
						document.querySelector(".s7").innerHTML = stus[0].getAttribute("name")
						document.querySelector(".s8").innerHTML = stus[0].getAttribute("tag")
						document.querySelector(".s9").innerHTML = stus[0].getAttribute("achievement")
						document.querySelector(".s10").innerHTML = stus[0].getAttribute("describe")
					}
				}
			}
		</script>
	</head>
	<body>
		<h2>点击按钮请求XML数据</h2>
		<h3>person1.xml的XML文本信息如下:</h3>
		标题：<span class="s1"></span><br>
		姓名：<span class="s2"></span><br>
		头衔：<span class="s3"></span><br>
		成就：<span class="s4"></span><br>
		简述：<span class="s5"></span><br>
		<button type="button" onclick="getData1()">读取XML文本内容</button>
		<hr >
		<h3>person1.xm2的XML文本信息如下:</h3>
		标题：<span class="s6"></span><br>
		姓名：<span class="s7"></span><br>
		头衔：<span class="s8"></span><br>
		成就：<span class="s9"></span><br>
		简述：<span class="s10"></span><br>
		<button type="button" onclick="getData2()">读取XML属性内容</button>
	</body>
</html>
